<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getUserCenter } from '@/api/user'
import MeScrollPage from '/src/components/MeScrollPage/MeScrollPage.vue'
import { PageProps } from '@/hooks/usePage'
import { getRechargeItemAPI, getCoinRecordAPI } from '@/api/recharge'
import { payAPI, getUnpaid, cancelPay } from '@/api/common'
import { pay } from '@/utils/payMent'
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()

const meScrollPageRef = ref()
const currentTab = ref(0)
const page = reactive<PageProps>({
    params: {
        type: 1
    },
    data: [],
    fetchData: getCoinRecordAPI // 请求接口 带分页的
})

const rechargeItem = ref([])

onLoad(async () => {
    const { data } = await getRechargeItemAPI()
    rechargeItem.value = data
    chooseCoin.value = data[0]
    await userStore.getUser()
    const res = await getUnpaid({ payType: 5 })
    if (res.data) {
        show.value = true
        payData.value = res.data
    }
})

const buttons = [
    {
        text: '取消',
        color: '#FFFFFF',
        background: '#bfbfbf',
        plain: false
    },
    {
        text: '确定',
        color: '#FFFFFF',
        background: '#376af7',
        plain: false
    }
]

const chooseCoin = ref({})
const coinCurrent = ref(0)
const changeCoin = (item: any, index: number) => {
    coinCurrent.value = index
    chooseCoin.value = item
}

const tabs = ['充值记录', '使用记录']

const changeTabs = (index: number) => {
    currentTab.value = index
    page.params = {
        type: index + 1
    }
    meScrollPageRef.value.resetData()
}
const show = ref(false)

const onClick = async (data: any) => {
    // show.value = false
    console.log(data)
    if (data.index === 0) {
        show.value = false
        const res = await cancelPay(payData.value.payFlowId)
        console.log(res)
    } else {
        console.log('确定')
        // console.log(payData.value.body, '------------------')
        pay(payData.value.body).then(() => {
            show.value = false
        })
    }
}
const onCancel = () => {
    show.value = false
}

const payData = ref({})

const onPay = async () => {
    console.log('立即充值')
    const res = await payAPI({
        payMethod: 1,
        payType: 5,
        ucoinRechargeItemId: chooseCoin.value.id
    })
    payData.value = res.data
    if (res.code == 20040) {
        show.value = true
        return
    }

    pay(payData.value.body).then(async () => {
        // 获取用户信息
        await userStore.getUser()
        // 获取充值记录
        meScrollPageRef.value.resetData()
    })

    // await cancelPay({
    //     payFlowId: unpaidRes.data.payFlowId
    // })
    //     console.log(unpaidRes)
    // }

    // console.log(payData.value.body)
    // if (data) {
    // await uni.requestPayment({
    //     provider: 'wxpay',
    //     orderInfo: {
    //         ...payData.value.body
    //     },
    //     ...payData.value.body
    // })
    // }
}

const baackFn = () => {
    uni.navigateBack()
}
</script>

<template>
    <view
        class="top-box px-[34rpx]"
        :style="{ backgroundImage: `url(${$getImg('/img/cacUser/recharge-bg.png')})` }"
    >
        <view class="u-flex top-title-box" :style="{ marginTop: `${$getMenuButtonTop()}px` }">
            <fui-icon name="arrowleft" color="#ffffff" @click="baackFn"></fui-icon>
            <view class="top-box-title">充值中心</view>
        </view>

        <view class="u-flex mt-[44rpx]">
            <image
                style="width: 32rpx; height: 32rpx"
                :src="$getImg('/img/cacUser/staryuan.png')"
            ></image>
            <view class="top-title-me">我的U币</view>
        </view>

        <view class="top-box-price mt-[25rpx]">{{ userStore.userInfo.ucoin || 0 }}</view>

        <view
            class="top-box-rule"
            @click="$jump(`/views/subViews/common/serviceProtocol?title=充值U币规则&type=10`)"
            >规则</view
        >
    </view>
    <view class="box">
        <view class="content-box">
            <view class="content-box-title">充值</view>
            <view class="content-list mt-[24rpx]">
                <view
                    v-for="(item, index) in rechargeItem"
                    :key="index"
                    class="content-item"
                    :class="{ 'content-item-choose': coinCurrent === index }"
                    @click="changeCoin(item, index)"
                >
                    <view class="u-flex">
                        <image
                            style="width: 36rpx; height: 36rpx"
                            :src="$getImg('/img/cacUser/staryuan.png')"
                        ></image>
                        <view
                            class="ml-[12rpx] content-item-title"
                            :style="{ color: coinCurrent === index ? '#376af7' : '#3d3d3d' }"
                            >{{ item.coin }}</view
                        >
                    </view>
                    <view
                        class="content-item-price"
                        :style="{ color: coinCurrent === index ? '#376af7' : '#3d3d3d' }"
                        >¥{{ item.amount }}</view
                    >

                    <view
                        class="item-box-tag"
                        :style="{
                            background:
                                coinCurrent === index
                                    ? 'linear-gradient(109deg, #376AF7 14%, #40A9FF 83%)'
                                    : '#bfbfbf'
                        }"
                        >送{{ item.bonusCoin }}币</view
                    >
                </view>
            </view>
        </view>
        <view class="content-bottom-box u-flex u-row-between">
            <view class="u-flex">
                <view class="bottom-price">¥{{ chooseCoin.amount }}</view>
                <view class="bottom-price-tag">送{{ chooseCoin.bonusCoin }}币</view>
            </view>

            <view class="bottom-btn" @click="onPay()">立即充值</view>
        </view>
        <view class="bottom-box">
            <view class="tabs-box u-flex">
                <view
                    class="tabs-item"
                    :class="{ 'tabs-item-choose': currentTab === index }"
                    v-for="(item, index) in tabs"
                    :key="index"
                    @click="changeTabs(index)"
                    >{{ item }}</view
                >
            </view>

            <MeScrollPage
                type="uni"
                ref="meScrollPageRef"
                :page="page"
                :config="{
                    height: 300
                }"
            >
                <view v-for="(item, index) in page.data" :key="index" class="bottom-box-item">
                    <view class="u-flex u-row-between" v-if="currentTab === 0">
                        <view class="u-flex">
                            <image
                                style="height: 36rpx; width: 36rpx"
                                :src="$getImg('/img/cacUser/staryuan.png')"
                            ></image>
                            <view class="bottom-box-coin">{{ item.coin }}U币</view>
                        </view>

                        <view class="bottom-box-item-price">-¥{{ item.amount }}</view>
                    </view>

                    <view class="u-flex u-row-between" v-if="currentTab === 1">
                        <view>购买客户</view>
                        <view class="u-flex gap-[10rpx]">
                            <image
                                style="height: 36rpx; width: 36rpx"
                                :src="$getImg('/img/cacUser/staryuan.png')"
                                v-if="!item.isMemberClueDeduction"
                            ></image>
                            <image
                                style="height: 36rpx; width: 36rpx"
                                :src="$getImg('/img/cacUser/userLogo.png')"
                                v-if="item.isMemberClueDeduction"
                            ></image>
                            <view class="bottom-item-ye-price" v-if="!item.isMemberClueDeduction"
                                >-{{ item.coin }}</view
                            >
                            <view class="bottom-item-ye-price" v-else
                                >-{{ item.memberClueDeductionCount }}</view
                            >
                        </view>
                    </view>

                    <view class="u-flex u-row-between mt-[18rpx] bottom-item-text-b">
                        <view v-if="!item.isMemberClueDeduction">剩余U币：{{ item.balance }}</view>
                        <view v-if="item.isMemberClueDeduction">剩余线索：{{ item.balance }}</view>
                        <view>{{ item.createTime }}</view>
                    </view>
                </view>
            </MeScrollPage>
        </view>
    </view>
    <fui-modal
        :buttons="buttons"
        width="600"
        :show="show"
        maskClosable
        @click="onClick"
        @cancel="onCancel"
        title="您有一笔未付款订单，是否重新付款?"
    >
        <!--<view class="u-font-35">您有一笔未付款订单，是否重新付款?</view>-->
    </fui-modal>
</template>

<style scoped lang="scss">
.top-box {
    width: 100%;
    height: 506rpx;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    flex-direction: column;
    color: #ffffff;
    .top-title-box {
        position: relative;
    }

    .top-box-title {
        font-weight: 600;
        font-size: 34rpx;
        color: #ffffff;

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .top-title-me {
        font-size: 28rpx;
        margin-left: 6rpx;
    }

    .top-box-price {
        font-weight: 600;
        font-size: 76rpx;
    }
    .top-box-rule {
        text-align: right;
    }
}
.box {
    position: relative;
    top: -60rpx;
    background: #ffffff;
    border-radius: 10px;
}
.content-box {
    padding: 34rpx 40rpx 30rpx;
    .content-box-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #232323;
    }
    .content-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20rpx;
        //margin-bottom: 30rpx;
    }
    .content-item {
        padding: 24rpx 138rpx 26rpx 24rpx;
        border-radius: 8px;
        box-sizing: border-box;
        border: 2rpx solid #e5e5e5;
        background: #f5f5f5;
        position: relative;
        overflow: hidden;
    }

    .content-item-choose {
        background: #e6edff;
        border: 1px solid #376af7;
    }

    .content-item-choose-text {
        color: #376af7;
    }
    .content-item-title {
        font-size: 40rpx;
        font-weight: 600;
        color: #3d3d3d;
    }
    .content-item-price {
        font-size: 28rpx;
        color: #999999;
        margin-top: 8rpx;
        margin-left: 48rpx;
    }
    .item-box-tag {
        position: absolute;
        bottom: 0;
        right: 0;
        background: #bfbfbf;
        font-size: 22rpx;
        color: #ffffff;
        padding: 10rpx 8rpx 8rpx 18rpx;
        border-radius: 15rpx 0 0 0;
    }
}

.content-bottom-box {
    padding: 26rpx 40rpx;
    border-top: 1rpx solid #efefef;
    .bottom-price {
        font-weight: 600;
        font-size: 50rpx;
        color: #376af7;
    }
    .bottom-price-tag {
        padding: 8rpx 15rpx 6rpx 6rpx;
        color: #ffffff;
        font-size: 18rpx;
        background: linear-gradient(109deg, #376af7 14%, #40a9ff 83%);
        margin-left: 8rpx;
        border-radius: 50rpx 50rpx 50rpx 0;
    }

    .bottom-btn {
        padding: 18rpx 44rpx;
        font-size: 28rpx;
        color: #ffffff;
        background: linear-gradient(109deg, #376af7 14%, #40a9ff 83%);
        border-radius: 358px;
    }
}

.bottom-box {
    height: 100%;
    width: 100%;
    .tabs-box {
        padding: 30rpx 40rpx 10rpx 40rpx;
        gap: 40rpx;
    }

    .tabs-item {
        font-size: 28rpx;
        color: #979797;
    }

    .tabs-item-choose {
        font-weight: 600;
        color: #333333;
        font-size: 30rpx;
    }

    .bottom-box-item {
        padding: 30rpx 40rpx;
        border-bottom: 0.5px solid #efefef;
    }

    .bottom-box-coin {
        font-weight: 600;
        font-size: 28rpx;
        color: #292d32;
    }

    .bottom-box-item-price {
        font-weight: 600;
        font-size: 30rpx;
        color: #ff513a;
    }
    .bottom-item-text-b {
        font-size: 22rpx;
        color: #999999;
    }
    .bottom-item-ye-price {
        font-weight: 600;
        font-size: 28rpx;
        color: #f58b25;
    }
}
</style>
